<template>
  <span >
    <el-form-item label="省份" prop="province" >
      <el-select v-model="form.province" :disabled="disabledShow" placeholder="请选择" class="form-input" @change="changeProvince">
        <el-option
          v-for="item in provinceOptions"
          :key="item.region_id"
          :label="item.region_name"
          :value="item.region_id"/>
      </el-select>
    </el-form-item>
    <el-form-item label="城市" prop="city">
      <el-select v-model="form.city" :disabled="disabledShow" placeholder="请选择" class="form-input" @change="changeCity">
        <el-option
          v-for="item in cityOptions"
          :key="item.region_id"
          :label="item.region_name"
          :value="item.region_id"/>
      </el-select>
    </el-form-item>
    <el-form-item label="区县" prop="district">
      <el-select v-model="form.district" :disabled="disabledShow" placeholder="请选择" class="form-input">
        <el-option
          v-for="item in countyOptions"
          :key="item.region_id"
          :label="item.region_name"
          :value="item.region_id"/>
      </el-select>
    </el-form-item>
  </span>
</template>

<script>

import filtercode from '@/components/Checkbox/filtercode'
import BaseTable from '@/components/BaseTable'
import formMixins from '@/mixins/formMixins'
import rSelect from '@/components/Select/Select'
import { mapGetters } from 'vuex'
export default {
  name: 'BsmDropDown',
  components: {
    BaseTable,
    rSelect,
    filtercode
  },
  mixins: [formMixins],
  props: {
    form: Object,
    disabledShow: Boolean
  },
  data() {
    return {
      provinceOptions: [],
      cityOptions: [],
      countyOptions: []
    }
  },
  computed: {
    ...mapGetters(['regionMap'])
  },
  mounted() {
    const array = Object.values(this.regionMap)
    this.provinceOptions = array
    this.setOptions()
  },
  methods: {
    changeProvince() {
      const p = this.form.province
      this.cityOptions = this.regionMap[p].children
      this.form.city = ''
      this.form.district = ''
    },
    changeCity() {
      const p = this.form.province
      const c = this.form.city
      this.form.district = ''
      this.countyOptions = this.regionMap[p].children[c].children
    },
    setOptions() {
      const p = this.form.province
      this.cityOptions = this.regionMap[p].children
      const c = this.form.city
      this.countyOptions = this.regionMap[p].children[c].children
    }

  }
}
</script>

<style scoped>

.magnifier {
  float: right;
  position: absolute;
  right: 50px;
  top: 23px;
  cursor: pointer;
}
</style>
